const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const { webpack } = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); // 压缩
const htmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
    entry: {
        app: './src/index.js', // 项目主入口文件
        vendors: ['vue', 'vuex', 'vue-router', 'axios', 'mint-ui', 'vue-preview'] // 分离第三方模块
    },
    output: {
        // path可以不写，写的话要拼接成绝对路径
        path: path.join(__dirname, './dist'),
        filename: 'js/[name].js',
        // publicPath: '../'
    },
    mode: 'production',
    // 专门用来放devServer配置
    devServer: {},
    module: {
        rules: [
            // {
            //     test: /\.css$/,
            //     // 先 css-loader 处理语法；再 style-loader 把样式插入页面
            //     use: ['style-loader', 'css-loader'],
            //     exclude: /node_modules/,
            // },
            {
                test: /\.css$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: './'
                    }
                }, 'css-loader'],
                exclude: /node_modules/,
            },
            {
                test: /\.js$/,
                exclude: /node_modules/, // 要排除
                use: {
                    loader: 'babel-loader',
                    options: {
                        // 
                        cacheDirectory: true, // 启用缓存
                        // 禁用模块语句从ES6 Module转化为 CommonJS，把ES6语法交给webpack处理
                        presets: [
                            ["@babel/preset-env", { modules: false }]
                        ],
                        "plugins": [
                            "@babel/plugin-transform-runtime",
                            "@babel/plugin-transform-regenerator", ["@babel/plugin-transform-modules-commonjs", { "strictMode": false }]
                        ],
                    }
                }
            }, {
                test: /\.vue$/,
                use: ['vue-loader']
            }, {
                test: /\.jpg|png|gif|bmp$/,
                use: {
                    loader: 'url-loader?limit=10000&name=images/[name]-[hash:8].[ext]',
                    options: {
                        esModule: false
                    }
                }
            }, {
                test: /\.ttf|woff|woff2|eot|svg$/,
                use: ['url-loader']
            }, {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader'],
                exclude: /node_modules/,
            }
        ]
    },
    plugins: [
        // 请确保引入这个插件！
        new VueLoaderPlugin(),
        // new ExtractTextPlugin('bundle.css')
        new MiniCssExtractPlugin({
            filename: 'css/[name].css',
            chunkFilename: '[id].css'
        }),
        new CleanWebpackPlugin(),
        // new webpack.optimize.CommonsChunkPlugin({ // 抽离公共部分的插件
        //     name: 'vendors', // 要抽离的第三方包的入口名称
        //     filename: 'vendors.js' // 输出文件名
        // })
        new OptimizeCssAssetsPlugin(),
        new htmlWebpackPlugin({
            // 创建一个在内存中生成HTML页面的插件
            // 这里指定模板页面，将来会根据指定的页面路径去生成内存中的页面
            template: path.join(__dirname, "./src/index.html"),
            filename: "index.html"
        }),
    ],
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    name: "commons",
                    chunks: "initial",
                    minChunks: 2
                }
            }
        },
        minimizer: [new UglifyJsPlugin()],
    },
}